{% extends "layout.html" %}


{% block body %}

<div class="container">
        <div class="row">


                <form method=POST action="{{ url_for('learnmode') }}" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

                 <div >     
                        <button type="submit" class= "btn btn-info " name="learnmode" value=True  >Learnmode</button>
                     </div> 
                </form>

                <form method=POST action="{{ url_for('artical_mode_input') }}" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

                 <div >   

                        <button type="submit" class= "btn btn-info " name="artical_mode_input" value=True  >artical_mode_input</button>
                        
                     </div> 
                </form>
                <p class="text-muted ">post_num= {{post_num}}</p>
        </div>

 
        <ul class="list-group">
          {% for i in input_text %}
          <li  class="list-group-item " >
            <span class="text-responsible ">{{i.sentence}}</span>
          </li>
          {% endfor %}
        </ul>

         <div class="row">
              

            
                     <audio   src={{posted_music}}   controls="controls"  preload="meta" type="audio/mp3" class=" col-xs-8 col-sm-8 col-md-8 col-lg-8"  controls="controls" ></audio> 
        </div>
        <div class="row">
                        <form  method=POST action="{{ url_for('user_posted_pre_next') }}" >
           <div class="row">
                 <input type="text"  name="go_num"  id="go_num" >
              
                <button type="submit" class= "btn btn-info "  id="go_post" name ="go_post" value="True" style="margin-left:3px" >Go</button>
               <button type="submit" class="btn btn-primary " id="pre_post" name ="pre_post">Previous Post</button>
                <button type="submit" class="btn btn-primary " id="next_post" name ="next_post">Next Post</button>
          </div>
            </form>           
        </div>


           

    <ul class="list-group">
       {% for i in baglist %}
        <li  class="list-group-item " > 
        <div style="padding: 10px 10px 10px;">
          <div class="row"  >
            
        
          <span class="text-primary lead font-weight-bold col-xs-5 col-sm-5 col-md-5 col-lg-5 " preload="auto"> {{i.word}} : </span>
           <audio   src={{i.wordMusic}}   controls="controls"  preload="meta" type="audio/mp3" class=" col-xs-5 col-sm-5 col-md-5 col-lg-5"></audio> 
            <div class="float-right col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
                      <p class="text-muted ">{{i.word_index}}</p>
                      </div> 

          </div>   
          </div> 
         <div style="padding: 10px 10px 10px;">
            <div class="row" >
             
                    <img class ="img-rounded img-responsive col-xs-3 col-sm-3 col-md-3 col-lg-3"  src={{i.image_a}}>

                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3"  src={{i.image_b}}>
                 
          
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3"  src={{i.clipart_c}}>
                
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3"  src={{i.clipart_d}}>
                    </div>        
             </div> 

          <div style="padding: 10px 10px 10px;">
    
         
            <div class="row"  >
               <span class="text-muted"> [Tips:]</span>

                <span class="text-responsible">{{i.word_tip}}</span>
              </div>  
             <div class="row"> 
              <span class="text-muted"> [Defintion:]</span>
              <span class="text-responsible"> {{i.word_def}}</span>
            </div>
             </div> 

            <div class="row" style="padding: 10px 10px 10px;">
            	<div>
              <form  method=POST action="/explode_mode/{{i.word_index}}" >
                    <button type="submit" class= "btn btn-info  col-xs-3 col-sm-3 col-md-3 col-lg-3 " name="explode" value=True >Explode!</button>
                </form>
      </div>
  
   
      <div class="btn btn-info col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <a href="https://www.vocabulary.com/dictionary/{{i.word}}"> Vocabulary.com</a>
        
      </div>
      <div class="btn btn-info col-xs-3 col-sm-3 col-md-3 col-lg-3">
       <a href="https://cn.bing.com/dict/search?q={{i.word}}&FORM=HDRSC6"> cn.bing.com</a>
        
      </div>
                      <form  method=POST action="/send_to_bag/{{i.word_index}}">
                 
                     <button type="submit" class="btn btn-primary col-xs-3 col-sm-3 col-md-3 col-lg-3 "  >ToBag</button>
            </form>  
      </div>    
        </li class="list-group">

 

    {% endfor %}

    </ul>

           <div  >

                <div class="row" style="padding: 10px 10px 10px;">
                 
                        <form method=POST action="{{ url_for('learnmode') }}" >

                 <div >     
                        <button type="submit" class= "btn btn-info btn-block  " name="download" value=True  >Learnmode</button>
                     </div> 
                        </form>

                    </div>
              <div class="row" style="padding: 10px 10px 10px;">
                        <form method=POST action="{{ url_for('bagmode') }}">

                   
                        <button type="submit" class= "btn btn-info col-xs-9 col-sm-9 col-md-9 col-lg-9  " name="bagmode" value=True  >Bag Mode</button>
                   
                        </form>
                <form  method=POST action="{{ url_for('help') }}" >
            
                   
                     <button type="submit" class="btn btn-primary col-xs-3 col-sm-3 col-md-3 col-lg-3  ">Help</button>
            </form> 

             </div>

            </div>

</div>



{% endblock %}

